<template>
  <el-card class="card">
    <div class="title">
      <h4>地址管理</h4>
      <el-button type="primary" @click="addAdd">新建地址</el-button>
    </div>
    
    <el-table v-if="haveData" :data="addressData">
      <el-table-column type="index" width="80px"></el-table-column>
      <el-table-column
        prop="receiverName"
        label="收件人姓名"
        width="150px"
      ><template slot-scope="scope">
        <span>{{scope.row.receiverName}}</span>
         <el-tag type="danger" size="mini" v-if="scope.row.defaultAddress===1">默认地址</el-tag>
      </template>
      </el-table-column>
      <el-table-column
        prop="receiverMobile"
        label="收件人电话"
        width="200px"
      ></el-table-column>
      <el-table-column  label="收件人地址">
        <template slot-scope="scope">
          {{scope.row.receiverProvince}}{{scope.row.receiverCity}}{{scope.row.receiverDistrict}}{{scope.row.receiverZip}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="updateAddress(scope.row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="deleteAddress(scope.$index, scope.row, addressData)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div v-else>
      <img
        src="@/assets/images/noaddress.png"
        style="margin-left: 30px; margin-top: 50px; margin-bottom: 10px"
      />
      <div style="color: silver">您暂无创建收货地址</div>
    </div>
    <el-dialog :visible="addressDiaVisible" :title="addressDiaTitle" :before-close="handleClose" width="400px" >
      <el-form :model="addressForm"  label-width="100px"  ref="addressForm">
        <el-form-item label="姓名：" prop='receiverName' 
        :rules="[{required:true,message:'姓名不能为空',trigger:'blur'}]">
          <el-input v-model="addressForm.receiverName"></el-input>
        </el-form-item>
        <el-form-item label="电话："  prop='receiverMobile'
        :rules="[{required:true,message:'电话不能为空',trigger:'blur'}]">
          <el-input v-model.number="addressForm.receiverMobile" type="telephone"></el-input>
        </el-form-item>
        <el-form-item label="地址："  :rules="[{required:true,message:'',trigger:'blur'}]">
          
          <el-cascader :options="option" v-model="addressForm.address" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址：" label-width="100px" prop="receiverZip" :rules="[{required:true,message:'详细地址不能为空',trigger:'blur'}]" >
          <el-input v-model="addressForm.receiverZip" type="textarea" rows="3" style="width:210px"></el-input>
        </el-form-item>
        <div>
           <el-form-item >
          <el-checkbox v-model="addressForm.defaultAdd"> 默认地址</el-checkbox>
        </el-form-item>
        </div>
        <el-form-item >
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary"  @click="submitForm('addressForm')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
import { selectAddressByMemberId ,insert,deleteAdd,updateAdd,selectByIdA} from "@/api/address.js";
import ShareData from "@/utils/localStorage.js";
import { regionData ,CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      haveData: false,
      addressData: [],
      addressDiaVisible:false,
      addressDiaTitle:"添加地址",
      addressForm:{receiverName:"",receiverMoblie:"",receiverProvince:"",receiverDistrict:"",receiverCity:"",zip:"",defaultAddress:0,defaultAdd:true},
     memberId:'',
     option:regionData,
     isShow:false,
    };
  },
  methods: {
    handleChange(){
      this.addressForm.receiverProvince=CodeToText[this.addressForm.address[0]]
      this.addressForm.receiverCity=CodeToText[this.addressForm.address[1]]
      this.addressForm.receiverDistrict=CodeToText[this.addressForm.address[2]]
    },
    handleClose(){
      this.addressForm={}
      this.addressDiaVisible=false
      
    },
    addAdd(){
      this.addressDiaVisible=true
      this.addressForm={}
      this.addressDiaTitle="添加地址"
    },
    submitForm(addressForm){
      this.$refs[addressForm].validate((valid) => {
          if (valid) {
            this.addressForm.memberId=this.memberId
            console.log(this.isShow)
            if(this.addressForm.defaultAdd===true){
              if(this.isShow===false){
                this.$notify({
                title:"小提示",
                message:"默认地址只能设置一个，若存在已设定默认地址将自动取消"
                })
              this.isShow=true
              }
              this.addressForm.defaultAddress=1
            }else{
              this.addressForm.defaultAddress=0
            }
            console.log(this.addressForm)
            if(this.addressDiaTitle==="添加地址"){
              insert(this.addressForm).then(res=>{
              if(res.data.code==="0000"){
                this.getAddress()
                this.addressDiaVisible=false
              }else{
                this.$message.error("添加失败，请检查网络")
              }
            })
            }else{
              updateAdd(this.addressForm).then(res=>{
                console.log(res)
              if(res.data.code==="0000"){
                this.getAddress()
                this.addressDiaVisible=false
              }else{
                this.$message.error("添加失败，请检查网络")
              }

            })
            
          } 
          }
          else {
            console.log('error submit!!');
            return false;
          }
        });
    },
     getAddress(){
      this.memberId=ShareData.getItem("memberId")
       selectAddressByMemberId(this.memberId).then(res=>{
         console.log(res)
         if(res.data.code==="0000"){
           if(res.data.data.length!==0){
             this.addressData=res.data.data
           this.haveData=true
           }
           
         }
       })
     },
     updateAddress(row){
       selectByIdA(row.id).then(res=>{
         if(res.data.code==="0000"){
           this.addressDiaVisible=true
            this.addressForm=res.data.data
            this.addressDiaTitle="修改地址"
         }
       })

     },
     deleteAddress(index,row,data){
      if(confirm("确定要删除此地址吗？")){
        deleteAdd(row.id).then(res=>{
          if(res.data.code==="0000"){
            data.splice(index,1)
          }
        })
      }
     },
    },
  mounted() {
    this.getAddress()
  },
};
</script>

<style lang="scss" scoped>
.card {
  padding: 3%;
  margin-bottom: 26%;
}
.title {
  margin-top: -20px;
}
.title h4 {
  float: left;
}
.title .el-button {
  float: right;
}
.el-dialog{
  text-align: center;
}
.el-form{
  width: 310px;
}
.el-input{
  width: 210px;
}
.el-select{
  width: 116px;
}
.el-option{
  width: 116px;
}

</style>